<template>
  <el-container>
    <el-header>
      <el-col :span="14">
        <el-col :span="5">
          门诊挂号
        </el-col>
        <el-col :span="10" v-show="!modularShow">
            <el-input v-model="invoiceNo" placeholder="发票号"/>
        </el-col>
        <el-col :span="5" v-show="!modularShow">
          <el-button @click="getInvoiceNo">更新发票号</el-button>
        </el-col>
      </el-col>
      <el-col :span="10">
        <div class="top-right-btn">
          <el-tooltip class="item" effect="dark" content="挂号" placement="top">
            <el-button type="primary" round icon="el-icon-edit" @click="handleAdd">挂号</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="读卡" placement="top">
            <el-button type="primary" round icon="el-icon-edit" @click="openCardReading">读卡</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="重打" placement="top">
            <el-button type="primary" round icon="el-icon-edit" @click="reset">重打</el-button>
          </el-tooltip>
        </div>
      </el-col>
    </el-header>
    <el-main>
      <el-row v-show="modularShow">
        <div class="app-container">
          <el-col :span="15">
            <el-col :span="5">
              <el-tag color="white">挂号信息列表</el-tag>
            </el-col>
            <el-col :span="14" :offset="1">
              <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
                <el-form-item prop="name">
                  <el-input
                    v-model="queryParams.name"
                    placeholder="病历号/姓名"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                  />
                </el-form-item>

                <el-form-item>
                  <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                  <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-col>
          <el-col :span="8">
            <div class="top-right-btn">
              <el-tooltip class="item" effect="dark" content="刷新" placement="top">
                <el-button size="mini" circle icon="el-icon-refresh" @click="handleQuery"/>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
                <el-button size="mini" circle icon="el-icon-search" @click="showSearch=!showSearch"/>
              </el-tooltip>
            </div>
          </el-col>
          <el-table border v-loading="loading" :data="registrationList">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="id" align="center" v-if="show" prop="id"/>
            <el-table-column label="患者id" align="center" v-if="show" prop="patientId"/>
            <el-table-column label="科室id" align="center" v-if="show" prop="deptId"/>
            <el-table-column label="排班id" align="center" v-if="show" prop="skdId"/>

            <el-table-column label="操作" align="center" width="150">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  plain
                  @click=""
                  v-hasPermi="['dms:registration:edit']"
                >缴费
                </el-button>
                <el-button
                  size="small"
                  plain
                  @click=""
                  v-hasPermi="['dms:registration:remove']"
                >退费
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center" prop="status">
              <template slot-scope="scope">
                <el-tag :type='onColourLine[scope.row.status]'>{{onLine[scope.row.status]}}</el-tag>
              </template>

            </el-table-column>
            <el-table-column label="病历号" align="center" prop="medicalRecordNo"/>
            <el-table-column label="姓名" align="center" prop="name"/>
            <el-table-column label="性别" align="center" prop="gender" :formatter="genderFormat"/>
            <el-table-column label="出生日期" align="center" prop="dateOfBirth">
              <template slot-scope="scope">
                <span>{{parseTime(scope.row.dateOfBirth, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="就诊日期" align="center" prop="attendanceDate" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.attendanceDate, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="看诊科目" align="center" prop="deptName"/>
            <el-table-column label="就诊年龄" align="center" prop="patientAgeStr"/>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </el-row>
      <el-row v-show="!modularShow">
        <!-- 添加或修改就诊(门诊)信息(一个病人一个病历号，多次就诊，多次就诊信息)对话框 -->
        <el-row>
          <el-col :span="22" :push="2">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
              <el-row v-show="false">
                <el-col :span="7">
                  <el-form-item label="患者id" prop="patientId">
                    <el-input v-model="form.patientId" placeholder="患者id"/>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="看诊医生id" prop="staffId">
                    <el-input v-model="form.staffId" placeholder="看诊医生id"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="app-padding" :gutter="20">
                <el-col :span="7">
                  <el-form-item label="身份证" prop="identificationNo">
                    <el-input v-model="form.identificationNo" placeholder="身份证号"/>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name" placeholder="姓名"/>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="出生日期" prop="dateOfBirth">
                    <el-date-picker
                      v-model="form.dateOfBirth"
                      align="right"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>


              </el-row>
              <el-row class="app-padding" :gutter="20">
                <el-col :span="7">
                  <el-form-item label="性别" prop="gender">
                    <el-select v-model="form.gender" placeholder="性别">
                      <el-option
                        v-for="item in genderOptions"
                        :key="item.dictValue"
                        :label="item.dictLabel"
                        :value="item.dictValue">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="家庭住址" prop="homeAddress">
                    <el-input v-model="form.homeAddress" placeholder="家庭住址"/>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="联系方式" prop="phoneNo">
                    <el-input v-model="form.phoneNo" placeholder="联系方式"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="app-padding" :gutter="20">
                <el-col :span="7">
                  <el-form-item label="挂号科室" prop="deptId">
                    <el-select v-model="form.deptId" filterable placeholder="挂号科室">
                      <el-option
                        v-for="item in deptOptions"
                        :key="item.deptId"
                        :label="item.deptName"
                        :value="item.deptId">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="挂号级别" prop="registrationRankId">
                    <el-select v-model="form.registrationRankId" placeholder="挂号级别">
                      <el-option
                        v-for="item in rankOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="挂号日期" prop="attendanceDate">
                    <el-date-picker
                      v-model="form.attendanceDate"
                      align="right"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>


              </el-row>
              <el-row class="app-padding" :gutter="20">
                <el-col :span="7">
                  <el-form-item label="午别" prop="noon">
                    <el-select :disabled="disabledFlag" v-model="form.noon" placeholder="午别 默认下午">
                      <el-option
                        v-for="item in noonOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="看诊医生" prop="skdId">
                    <el-select :disabled="disabledFlag" v-model="form.skdId" placeholder="看诊医生">
                      <el-option
                        v-for="item in StaffOptions"
                        :key="item.skdId"
                        :label="item.name"
                        :value="item.skdId">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="应收金额" prop="price">
                    <el-input v-model="form.price" :disabled="true" placeholder="应收金额"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="app-padding" :gutter="20">
                <el-col :span="7">
                  <el-form-item label="支付方式" prop="catId">
                    <el-select v-model="form.catId" placeholder="支付方式">
                      <el-option
                        v-for="item in settlementCatOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="病历本" prop="needBook">
                    <el-radio-group v-model="form.needBook">
                      <el-radio label="1">是</el-radio>
                      <el-radio label="2">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-col>
        </el-row>
        <el-row style="float: right;">
          <el-button type="primary" @click="submitForm">挂号打印&发票</el-button>
        </el-row>
      </el-row>
      <el-divider></el-divider>

      <!-- 读卡对话框 -->
      <el-dialog :title="cardTitle" :visible.sync="open" width="500px" append-to-body>
        <el-tag type="info">身份证号</el-tag>
        <el-form ref="cardForm" :model="cardForm" :rules="rules" label-width="80px">
          <el-input v-model="cardForm.identificationNo" placeholder="请输入身份证号"/>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitCardForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
  import {RegistrationPatientList, handleRegistration,} from "@/api/dms/registration";
  import ScrollPane from "../../../layout/components/TagsView/ScrollPane";
  import Icons from "../../components/icons/index";
  // 科室
  import {listDept} from "@/api/system/dept";
  // 性别
  import {listData} from "@/api/system/dict/data";
  // 挂号级别
  import {listRegistration_rank} from "@/api/sms/registration_rank";
  // 结算类别
  import {listCat} from "@/api/bms/cat";
  // 员工
  import {listStaffBySkd} from "@/api/sms/staff";
  // 患者
  import {getPatientByIdentificationNo} from "@/api/pms/patient";
  /*// 发票
  import {queryInvoiceNo} from "@/api/bms/invoice_record";*/

  export default {
    name: "Registration",
    components: {Icons, ScrollPane},
    data() {
      return {
        // 遮罩层
        loading: true,
        //隐藏
        show: false,
        // select 列表禁用
        disabledFlag: true,
        // 模块隐藏
        modularShow: true,
        // 状态的对应的值
        onLine: {"1": "待诊", "2": "就诊中", "3": "诊毕", "4": "已退号"},
        // 状态的对应的颜色
        onColourLine: {"1": "warning", "2": "danger", "3": "success", "4": "info"},
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 就诊(门诊)信息(一个病人一个病历号，多次就诊，多次就诊信息)表格数据
        registrationList: [],
        // 弹出层标题
        cardTitle: "",
        // 是否显示弹出层
        open: false,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: undefined,
          medicalRecordNo: undefined
        },
        // 表单参数
        form: {},
        // 读卡参数
        cardForm: {},
        // 表单校验
        rules: {},
        // 性别列表
        genderOptions: [],
        // 午别列表
        noonOptions: [{
          value: '0',
          label: '上午'
        }, {
          value: '1',
          label: '下午'
        }],
        // 科室列表
        deptOptions: [],
        // 挂号级别列表
        rankOptions: [],
        // 结算类别列表
        settlementCatOptions: [],
        // 员工(看诊医生)列表
        StaffOptions: [],
        //发票号 表单外的发票号
        invoiceNo:null
      };
    },
    created() {

      this.getList();
      // 性别列表
      this.getGenderList({dictType: "sys_user_sex"});
      // 科室列表
      this.getDeptList();
      // 挂号级别列表
      this.getRankList();
      // 结算类别
      this.getCatList();
    },
    computed: {
      valueChange() {
        const {attendanceDate, deptId, registrationRankId, noon} = this.form
        return {
          attendanceDate, deptId, registrationRankId, noon
        }
      }
    },
    watch: {
      // 监听姓名查询参数的变化
      'queryParams.name'(val) {
        // 将值赋给 病历号
        this.queryParams.medicalRecordNo = val;
      },
      // 监听看诊医生 变化
      'form.skdId'(val){
        // 应收金额 赋值
        if(val){
          this.form.staffId = this.StaffOptions.find((staff) => (staff.skdId === val)).id;
          return;
        }
        this.form.staffId= null;
      },
      // 监听挂号科室、级别、日期是否改变
      valueChange(val) {
        if (val.attendanceDate != null && val.deptId != null && val.registrationRankId != null) {
          // 等于 null 则为 下午
          val.noon = val.noon == null ? "1" : val.noon;
          // 取消禁用
          this.disabledFlag = false;
          // 医生查询
          this.getStaffList(val);
          // 应收金额 赋值
          this.form.price = this.rankOptions.find((rank) => (rank.id === val.registrationRankId)).price;
        } else {
          this.disabledFlag = true;
        }
      }
    },
    methods: {
      /** 查询就诊(门诊)信息(一个病人一个病历号，多次就诊，多次就诊信息)列表 */
      getList() {
        this.loading = true;
        RegistrationPatientList(this.queryParams).then(response => {
          this.registrationList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
      },
      // 表单重置
      reset() {
        this.form = {
          /*id: null,*/
          patientId: null,
          createTime: null,
          endAttendance: null,
          status: 0,
          skdId: null,
          bindStatus: 0,
          deptId: null,
          attendanceDate: null,
          patientAgeStr: null,
          identificationNo: null,
          name: null,
          dateOfBirth: null,
          gender: null,
          homeAddress: null,
          phoneNo: null,
          registrationRankId: null,
          noon: null,
          staffId: null,
          price: null,
          catId: null,
          needBook: null
        };
        this.resetForm("form");
      },

      // 读卡表单重置
      cardReset() {
        this.cardForm = {
          identificationNo: null
        };
        this.resetForm("cardForm");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 挂号按钮操作 */
      handleAdd() {
        this.modularShow = !this.modularShow;
      },
      /** 打开读卡 */
      openCardReading() {
        this.cardReset();
        this.open = true;
        this.cardTitle = "读卡(获取用户身份证号)";
      },

      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
              handleRegistration(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("挂号成功");
                  this.open = false;
                  this.getList();
                  this.modularShow = !this.modularShow;
                  // 表单刷新
                  this.reset();
                  this.invoiceNo=null;
                }
              });
          }
        });
      },
      /** 读卡提交按钮 */
      submitCardForm() {
        // 表单验证
        this.$refs["cardForm"].validate(valid => {
          if (valid) {
            getPatientByIdentificationNo(this.cardForm.identificationNo).then(response => {
              if (response.data) {
                this.form = response.data;
                this.form.gender = response.data.gender.toString();
                this.form.patientId = response.data.id;
                this.msgSuccess("读卡成功");
                this.open = false;   //关闭读卡弹出框
                this.modularShow=false// 打开添加读卡页面
              } else {
                this.msgError("没有该身份证号");
              }
            });
          }
        })
      },
      /**性别格式转换*/
      genderFormat(row, column, cellValue) {
        if (cellValue === 1) {
          return "男"
        } else if (cellValue === 0) {
          return "女"
        }
      },
      /** 性别列表获取 */
      getGenderList(params) {
        listData(params).then(response => {
          this.genderOptions = response.rows;
        });
      },
      /** 科室列表获取 */
      getDeptList() {
        listDept().then(response => {
          this.deptOptions = response.data;
        });
      },
      /**挂号级别列表获取 */
      getRankList() {
        listRegistration_rank().then(response => {
          this.rankOptions = response.rows;
        });
      },
      /** 结算类别列表获取 */
      getCatList() {
        listCat().then(response => {
          this.settlementCatOptions = response.rows;
        });
      },
      /** 看诊医生*/
      getStaffList(params) {
        listStaffBySkd(params).then(response => {
          //防止已经选中的值的时候 动态加载数据不会刷新
          if(Object.keys(response.rows).length === 0){
            // 清空
            this.form.skdId=null;
          }
          this.StaffOptions = response.rows;
        });
      },
      /** 获取发票号*/
      getInvoiceNo() {
        queryInvoiceNo().then(response => {
          this.invoiceNo = response.data;
          this.form.invoiceNo = response.data;
        });
      }
    }
  };
</script>

<style scoped>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .app-padding {
    padding: 10px;
  }
</style>
